<template>
	<view>
		<u-navbar :border-bottom="false" title="个人中心" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<view class="user_box">
			<view class="user_row_head">
				<u-form-item label="头像">
					<view class="head_right" @click="goHead()">
						<view @click="editImage()" class="cu-avatar xl round margin-xs" :style="{backgroundImage:'url('+(cover==''||cover==null?'/static/touxiang.png':cover)+')'}"></view>
						<u-icon name="arrow-right" color="#c7c7cc" size="28"></u-icon>
					</view>
				</u-form-item>
			</view>
			<view class="bg_fff_color">
				<u-form-item label="称呼">
					<view class="head_right">
						<u-input v-model="nickName" type="text" :border="false" input-align="right"/>
					</view>
				</u-form-item>
				<u-form-item label="性别">
					<view class="head_right" @click="isshowsex">
						<view><text>{{sex_hz | filter_sex}}</text><u-select v-model="sex_show" :list="sel_list"  @confirm="sexConfirm"></u-select></view>
						<u-icon name="arrow-right" color="#c7c7cc" size="28"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="生日">
					<view class="head_right" @click="birth_click">
						<view>{{birthday}}</view>
						<u-icon name="arrow-right" color="#c7c7cc" size="28"></u-icon>
						<u-picker mode="time" v-model="birthday_show" :params="time_params" @confirm="birthdayConfirm"></u-picker>
					</view>
				</u-form-item>
				<u-form-item label="手机号码" label-width="130">
					<view class="head_right">
						<view style="color: #999999;">{{telephone}}</view>
					</view>
				</u-form-item>
				<u-form-item label="邮箱">
					<view class="head_right" @click="open_email()">
						<view>{{email}}</view>
						<u-modal v-model="email_show" :title-style="{color: '#303133'}" title="修改邮箱" :mask-close-able="true">
							<view class="input_content">
								<u-input v-model="email" type="text" :border="true" input-align="left" placeholder="请输入邮箱"/>
							</view>
						</u-modal>
						<!-- <u-icon name="arrow-right" color="#c7c7cc" size="28"></u-icon> -->
					</view>
				</u-form-item>
				<u-form-item label="联系地址" label-width="130">
					<view class="head_right">
						<view>{{address}}</view>
						<u-icon name="arrow-right" color="#c7c7cc" size="28"></u-icon>
					</view>
				</u-form-item>
			</view>
			
			
		</view>
		<view class="user_photo">
			<view class="grace-title" style="margin-top:10rpx;">上传合规名片（房产经纪人、开发商注册送30积分）</view>
			<view class="grace-file-list">
				<view class="add-btn" @tap="addImg" v-if="canAdd">
					<view></view><view class="title">请上传名片照片</view>
				</view>
				<view class="items" v-for="(item, index) in imgLists" :key="index">
					<image :src="item" mode="aspectFill" :data-imgurl="item" @tap="showImgs"></image>
					<view class="remove grace-icons icon-remove" @tap="removeImg" :id="'grace-items-img-'+index"></view>
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<u-button type="primary" @click="send()" class="zdytjbc" :ripple="true" ripple-bg-color="#2149c3">提交保存</u-button>
		</view>
	</view>
</template>

<script>
	var maxNum = 3, _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},
	    data() {
	        return {
				imgLists : [],
				canAdd : true,
				uploadFilePath : '',
				nickName: '',
				realName: '',
				telephone: '',
				birthday: '',
				email: '',
				address: '',
				remark: '',
				cover: '',
				integralCount: 0,
				userLevel: '',
				vipType: '',
				email_show:false,
				sel_list:[{value:'0',label:'男'},{value:'1',label:'女'},{value:'2',label:'未知'}],
				sex_show:false,
				sex_hz:2,
				time_params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				birthday_show: false
	        }
	    },
		onShow() {
			this.getMember('');
		},
		onLoad(){
			_self = this;
			this.getMember('card');
		},
		filters:{
			filter_sex: function(num){
				if(num == 0){
					return '男'
				}else if(num == 1){
					return '女'
				}else if(num == 2){
					return '未知'
				}else{
					return num
				}
			}
		},
	    methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
			addImg : function(){
			    var num = maxNum - _self.imgLists.length;
			    if(num < 1){return false;}
			    uni.showLoading({title:""});
			    uni.chooseImage({
			        count: num,
			        sizeType: ['compressed'],
			        success: function(res) {
			            _self.imgLists = _self.imgLists.concat(res.tempFilePaths);
			            if (_self.imgLists.length >= maxNum){
			                _self.canAdd = false;
			            }
			            uni.hideLoading();
			        },
					fail:function(){
						uni.hideLoading();
					}
			    });
			},
			removeImg : function(e){
			    var index = e.currentTarget.id.replace('grace-items-img-', '');
			    _self.imgLists.splice(index, 1);
			    _self.imgLists = _self.imgLists;
			    if (_self.imgLists.length < maxNum) {
			        _self.canAdd = true;
			    }
			},
			showImgs : function(e){
			    var currentImg = e.currentTarget.dataset.imgurl;
			    uni.previewImage({
			      urls: this.imgLists,
			      current : currentImg
			    })
			},
			getMember : function(t){
			    uni.request({
			    	url: this.serverUrl + 'app/getMember',
			    	header: {
			    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
			    	},
			    	method: 'POST',
			    	data: {
						id: this.userInfo.id,
			    	},
			    	success: (r) => {
						//console.log(r)
			    		if (r.data.code==0) {
							if(t==''){
								this.cover=r.data.data.cover;
								this.nickName=r.data.data.nickName;
								this.realName=r.data.data.realName;
								this.telephone=r.data.data.telephone;
								this.sex_hz=r.data.data.sex;
								this.birthday=r.data.data.birthday;
								this.email=r.data.data.email;
								this.address=r.data.data.address;
								this.remark=r.data.data.remark;
								this.integralCount=r.data.data.integralCount;
								var ulevel = '';
								if(r.data.data.userLevel==null || r.data.data.userLevel==''){
									ulevel = '普通会员';
								}else if(r.data.data.userLevel=='M1'){
									ulevel = 'M1总监';
								}else{
									ulevel = r.data.data.userLevel+'经理';
								}
								this.userLevel=ulevel;
								var uVip = '';
								if(r.data.data.vipType=='1'){
									uVip = '普通用户';
								}else if(r.data.data.vipType=='2'){
									uVip = '会员用户';
								}
								this.vipType=uVip;
							}else{
								if(r.data.data.card!=null && r.data.data.card!=''){
									this.uploadFilePath=r.data.data.card;
									var cimgs = r.data.data.card.split(";");
									_self.imgLists = _self.imgLists.concat(cimgs);
									if (_self.imgLists.length >= maxNum){
									    _self.canAdd = false;
									}
									
								}
							}
							
						}
					}
				})
			},
			send(){
				if(this.nickName.length<1){
					uni.showToast({ title: "昵称不能为空", icon: "none" });
					return;
				}
				if(this.telephone.length<1){
					uni.showToast({ title: "手机号不能为空", icon: "none" });
					return;
				}
				var reg = /^1[0-9]{10,10}$/;
				if (!reg.test(this.telephone)) {
					uni.showToast({ title: "手机号格式不正确", icon: "none" });
					return;
				}
				uni.showLoading({});
				var ctemp = '';
				for(var i=0;i<this.imgLists.length;i++){
					ctemp+=this.imgLists[i]+";";
				}
				if(ctemp.length>0){
					ctemp = ctemp.substring(0,ctemp.length-1);
				}
				if (this.imgLists.length>0 && this.uploadFilePath!=ctemp) {
					this.uploadFilePath = '';
					this.uploadFiles();
				} else{
					if(this.imgLists.length==0){
						this.uploadFilePath = '';
					}
					this.editMember();
				}
			},
			uploadFiles(f) {
			 	var i=f?f:0;
				if(this.imgLists[i].indexOf('upload')=='-1'){
					uni.uploadFile({
						url: this.serverUrl + 'app/upload',
						header: {
							"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
						},
						filePath: this.imgLists[i],
						name: 'file',
						method: "POST",
						formData: {
							username: "",
						},
						success: (r) => {
							//console.log(r);
							var rdata = JSON.parse(r.data);
							this.uploadFilePath += rdata.url +";";
						},
						fail: (r) => {
							uni.showToast({
								title:"上传失败",
							})
						},
						complete: (r) => {
							i++;
							if(i==this.imgLists.length){ 
								this.uploadFilePath = this.uploadFilePath.substring(0,this.uploadFilePath.length-1);
								this.editMember();
							}else{
								f=i;
								this.uploadFiles(f);
							}									
						}
					});
				}else{
					this.uploadFilePath += this.imgLists[i] +";";
					i++;
					if(i==this.imgLists.length){ 
						this.uploadFilePath = this.uploadFilePath.substring(0,this.uploadFilePath.length-1);
						this.editMember();
					}else{
						f=i;
						this.uploadFiles(f);
					}
				}
			 },
	        editMember : function(){
	            uni.request({
	            	url: this.serverUrl + 'app/editMember',
	            	header: {
	            		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
	            	},
	            	method: 'POST',
	            	data: {
						id: this.userInfo.id,
	            		nickName: this.nickName,
	            		realName: this.realName,
						telephone: this.telephone,
						sex: this.sex_hz,
						birthday: this.birthday,
						email: this.email,
						address: this.address,
						remark: this.remark,
						card: this.uploadFilePath,
	            	},
	            	success: (r) => {
	            		if (r.data.code==1) {
							this.login(r.data.data);
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
						}
					},
					complete: (r) => {
						uni.hideLoading();
					}
				})
			},
			editImage(){
				uni.navigateTo({
					url:'/pageB/general/edit-image/edit-image'
				})
			},
			goCash(){
				uni.navigateTo({
					url:'/pageB/general/cash/cash'
				})
			},
			goHead(){
				uni.navigateTo({
					url:'/pageB/general/edit-image/edit-image'
				})
			},
			open_email(){
				this.email_show = true;
			},
			isshowsex(){
				this.sex_show = true;
			},
			sexConfirm(e){
				this.sex_hz = e[0].value;
			},
			birth_click(){
				this.birthday_show = true
			},
			birthdayConfirm(e){
				this.birthday = e.year + "-" + e.month + "-" + e.day;
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #EEEEEE;
	}
	@import "../../graceUI/graceIcons.css";
	/* 文件选择及预览 */
	.grace-file-list{display:-webkit-box;display:-webkit-flex;display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
	.grace-file-list .add-btn{
		width:200rpx; height:120rpx; 
		margin:5px 1%; 
		background:url(../../static/sfzbg.png)no-repeat top center;
		background-size: cover;
		padding-bottom: 40rpx;
		position: relative;
	}
	.grace-file-list .add-btn view.title{
		box-sizing: content-box;
		font-size:20rpx; 
		height:30rpx; 
		margin-top:5px; 
		line-height:30rpx; 
		text-align:center; 
		color:#999999; 
		width:100%;
		bottom: 0px;
		left: 0px;
	}
	.grace-file-list .add-btn view:first-child{font-size:120rpx !important; height:80rpx; line-height:80rpx; margin:25rpx 0;}
	.grace-file-list .items{width:200rpx; height:120rpx;  position:relative; overflow:hidden; margin:5px 1%; font-size:0; background:#F3F4F5;}
	.grace-file-list .items image{width:100%;}
	.grace-file-list .items .remove{width:50rpx; height:50rpx; line-height:50rpx; text-align:center; font-size:40rpx; position:absolute; z-index:1; right:0; bottom:0; background:rgba(0,0,0, 0.5); color:#FFFFFF;}
	
	.required{
		color: red;
	}
	.padding{
		text-align: center;
	}
	.cu-form-group .title{
		width: 170rpx;
	}
	.tixian{
		text-decoration: underline;
		font-size: 26rpx;
	}
	.ulevel{
		font-size: 22rpx;
		margin-left: 10rpx;
		background-color: #FF0000;
		color: #fff;
		padding: 5rpx;
		border-radius: 15rpx;
		position: absolute;
		top: 10rpx;
	}
	.uVip{
		font-size: 22rpx;
		margin-left: 110rpx;
		background-color: #00BFFF;
		color: #fff;
		padding: 5rpx;
		border-radius: 15rpx;
		position: absolute;
		top: 10rpx;
	}
	.user_box{
		margin: 20rpx 0rpx;
	}
	.user_row_head{
		background-color: #FFFFFF;
		padding: 0rpx 40rpx 0rpx 45rpx;
	}
	.head_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.bg_fff_color{
		background-color: #FFFFFF;
		padding: 0rpx 40rpx 0rpx 45rpx;
	}
	.user_photo{
		padding: 0px 35rpx 20rpx 40rpx;
		.grace-title{
			font-size: 28rpx;
			color: #555555;
		}
	}
	.zdytjbc button{
		background-image: linear-gradient(
			#2149c3, 
			#2149c3), 
		linear-gradient(90deg, 
			#1f69ff 0%, 
			#7059ff 100%);
		background-blend-mode: normal, 
			normal;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
	}
	.input_content{
		padding: 0rpx 30rpx;
	}
</style>
